/* ==========================================================================
   CSS RISOLUTIVO - WEB FORM&R
   Ottimizzazione Stampa (Celle Scomparse) e Layout Responsive (Fascia Azzurra)
   ========================================================================== */

/* ==========================================================================
   1. VISUALIZZAZIONE A SCHERMO (Bordi "Armadietti" e Griglia)
   ========================================================================== */

/* Applica il bordo grigio chiaro e l'effetto scheda a tutte le celle dei corsi
   e ai box dei dettagli (sia bianchi che colorati) */
td[style*="#ffffff"],
div[style*="#ffffff"],
td,
.DataCorso,
.Titolo {
    border: 1px solid #cccccc !important;   /* Grigio chiaro ben visibile su sfondo chiaro */
    border-radius: 6px !important;          /* Arrotonda gli angoli per l'effetto moderno */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important; /* Leggero effetto ombra tridimensionale */
    transition: all 0.3s ease !important;   /* Transizione fluida per l'interazione */
}

/* Effetto interattivo al passaggio del mouse (hover) sui corsi */
td[style*="#ffffff"]:hover,
div[style*="#ffffff"]:hover,
td:hover {
    border-color: #003399 !important;       /* Il bordo si evidenzia in blu scuro (colore del logo) */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important; /* L'ombra si accentua dando effetto sollevamento */
}

/* ==========================================================================
   2. OTTIMIZZAZIONE RESPONSIVE (Risolve il blocco della fascia azzurra)
   ========================================================================== */

/* Impedisce alla tabella di avere una larghezza fissa rigida (es. 1050px)
   e la rende fluida per adattarsi a qualsiasi monitor o finestra */
table {
    width: 100% !important;                 /* Occupa il 100% della larghezza disponibile */
    max-width: 1100px !important;           /* Impedisce al sito di allargarsi troppo su monitor enormi */
    margin: 0 auto !important;              /* Centra la tabella nella pagina */
    table-layout: auto !important;          /* Consente alle colonne di ridimensionarsi in modo flessibile */
}

/* Rende la fascia azzurra dei link fluida e adattabile */
td[bgcolor="#e0f0ff"],
td[style*="background-color: #e0f0ff"],
td[style*="background-color:#e0f0ff"] {
    width: 100% !important;
    display: block !important;              /* Permette il ridimensionamento fluido e l'incolonnamento */
    box-sizing: border-box !important;      /* Include margini e padding nella larghezza totale */
    padding: 15px 20px !important;          /* Spazio interno confortevole */
    height: auto !important;                /* L'altezza si calcola dinamicamente in base al testo */
}

/* ==========================================================================
   3. ADATTAMENTO DISPOSITIVI MOBILI (Smartphone e Tablet < 768px)
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* Trasforma le righe e le celle della tabella in blocchi singoli incolonnati verticalmente */
    tr, td {
        display: block !important;
        width: 100% !important;             /* Ogni box occupa l'intera larghezza dello schermo del telefono */
        box-sizing: border-box !important;
        margin-bottom: 15px !important;     /* Spazio verticale di separazione tra un corso e l'altro */
    }

    /* Riorganizza i link della fascia azzurra per renderli facili da toccare con le dita */
    td[bgcolor="#e0f0ff"] a,
    td[style*="background-color: #e0f0ff"] a {
        display: block !important;          /* Dispone i link verticalmente come pulsanti */
        margin: 10px 0 !important;          /* Spazio tra un link e l'altro */
        padding: 8px !important;
        font-size: 14px !important;         /* Dimensione di testo ideale per smartphone */
        text-align: center !important;      /* Centra il testo all'interno dei "pulsanti" */
        background-color: #f0f7ff !important;/* Sfondo leggermente contrastato per facilitare il click */
        border: 1px solid #b0d4ff !important;
        border-radius: 4px !important;
    }
}

/* ==========================================================================
   4. OTTIMIZZAZIONE PER LA STAMPA (@media print)
   ========================================================================== */
@media print {
    /* Forza il browser dell'utente a mantenere e stampare i colori di sfondo */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Impedisce alle celle vuote o informative di collassare o sparire */
    table, td, th {
        empty-cells: show !important;
    }

    /* Assicura che i bordi degli "armadietti" rimangano grigi e ben definiti sulla carta */
    td, .DataCorso, .Titolo {
        border: 1px solid #a0a0a0 !important;   /* Grigio medio nitido per stampanti in bianco e nero */
        box-shadow: none !important;            /* Rimuove le ombre per evitare sfocature in stampa */
        background-color: #ffffff !important;   /* Forza lo sfondo bianco interno per pulizia */
        page-break-inside: avoid !important;    /* Evita che una scheda corso venga tagliata a metà tra due pagine */
    }

    /* Evita che testi bianchi su sfondo colorato spariscano se la stampa sfondo è disattivata */
    td, td * {
        color: #000000 !important;              /* Forza tutto il testo a nero puro, ad alta leggibilità */
    }

    /* Rende i link e i pulsanti di iscrizione ben evidenti su carta */
    a {
        color: #003399 !important;
        text-decoration: underline !important;  /* Sottolineatura classica per far capire che sono elementi cliccabili */
    }
}